<html>
  <head>
    <title>Text</title>
    <meta name="description" content="Text - A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
  </head>
  <body>
    <a-scene background="color: #222">
      <a-assets>
        <a-mixin
          id="marker"
          geometry="primitive: plane; width: 0.02; height: 0.02"
          material="color: red"
        ></a-mixin>
      </a-assets>

      <a-entity mixin="marker" position="-2.5 0.7 0.01"></a-entity>

      <!-- Animations. -->
      <a-entity id="opacity" position="-2.5 0.7 0"
                animation="property: components.text.material.uniforms.opacity.value; to: 0; dir: alternate; loop: true"
                text="color: white; align: center; value: Animating opacity; width: 1.5">
      </a-entity>
      <a-entity mixin="marker" position="0 0.7 0.01"></a-entity>
      <a-entity id="color" position="0 0.7 0"
                animation="property: components.text.material.uniforms.color.value; type: color; to: red; dir: alternate; loop: true"
                text="color: white; align: center; value: Animating color; width: 1.5">
      </a-entity>
      <a-entity mixin="marker" position="2.5 0.7 0.01"></a-entity>
      <a-entity id="size" position="2.5 0.7 0"
                animation="property: scale; to: 2 2 2; dir: alternate; loop: true"
                text="color: white; align: center; value: Animating size; width: 1.5">
      </a-entity>

      <!-- Anchors. -->
      <a-entity mixin="marker" position="-2.5 1 0.01"></a-entity>
      <a-entity position="-2.5 1 0"
                text="anchor: left; width: 1.5; color: white; value: [LEFT ANCHOR] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam">
      </a-entity>
      <a-entity mixin="marker" position="0 1 0.01"></a-entity>
      <a-entity position="0 1 0"
                text="anchor: center; width: 1.5; color: white; value: [CENTER ANCHOR] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam">
      </a-entity>
      <a-entity mixin="marker" position="2.5 1 0.01"></a-entity>
      <a-entity position="2.5 1 0"
                text="anchor: right; width: 1.5; color: white; value: [RIGHT ANCHOR] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam">
      </a-entity>

      <!-- Spacing. -->
      <a-entity mixin="marker" position="-1 2.5 0.01"></a-entity>
      <a-entity position="-1 2.5 0"
                text="width: 2; color: white; value: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam">
      </a-entity>

      <a-entity mixin="marker" position="-1 2 0.01"></a-entity>
      <a-entity position="-1 2 0"
                text="width: 2; lineHeight: 50; letterSpacing: 5; color: white; value: [LINE AND LETTER SPACING] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam">
      </a-entity>

      <!-- Alignments. -->
      <a-entity position="2 2 0">
        <a-entity mixin="marker" position="0 0 0.01"></a-entity>
        <a-entity position="0 0 0" geometry="primitive: plane; width: auto; height: auto" material="color: #333"
                  text="color: yellow; align: left; value: [LEFT ALIGNED]; width: 2; ">
        </a-entity>
        <a-entity mixin="marker" position="0 0.2 0.01"></a-entity>
        <a-entity position="0 0.2 0" geometry="primitive: plane; width: auto; height: auto" material="color: #333"
                  text="color: red; align: right; value: [RIGHT ALIGNED]; width: 2; ">
        </a-entity>
        <a-entity mixin="marker" position="0 0.4 0.01"></a-entity>
        <a-entity position="0 0.4 0" geometry="primitive: plane; width: auto; height: auto" material="color: #eee"
                  text="color: blue; align: center; value: [CENTER ALIGNED]; width: 2; ">
        </a-entity>
      </a-entity>

      <a-entity position="0 1.8 2">
        <a-entity camera look-controls wasd-controls></a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>
